Skip to main content

Page builder

Note

Page builder is a beta feature, please contact support if you have any issues.

The page builder option allows for greater flexibility in how your main app screen is displayed. The page builder section opperates off the concept of 'sections' with each section displaying in the order it is added.

To add a new section, simply select the Add section button at the top right of the screen.'

Sections can be moved up or down using the move up or move down buttons.

Note

You must select ‘page builder’ as the main home screen type in the setting section for these options to display in app

Main settings

The main secttings section allows exposes global settings for the page builder.

SettingValueDescription
Transparent headerYes/NoThis setting will determine if the top header should show. Setting this to yes will make the top header transparent, and only show the hamburger menu and search icon
Sponsor bannerYes/NoThis setting will determine if a sponsor banner should be shown on the main page or not.
Fixed first sliderYes/NoThis setting will determine if the first section should be 'fixed' or not. When set to yes, the first section will be fixed and content will scroll under it
Top icon colorWhite/BlackThis setting will set the top icons Hamburger menu & Search Icon color to white or black, depending on your needs
Max width webInteger pxThis is the max width of the main container for the web view. This means the display will only scale to a maximum of this width
Max width MobileInteger pxThis is the max width of the main container for the phone view. This means the display will only scale to a maximum of this width

Section settings

Each section has its own set of settings that allow you to customize what each section does.

SettingValueDescription
TitleTextThe title of the section, this will display above the section
Section
  • session
  • amenities
  • sponsors
  • exhibitors
  • speakers
  • feed
  • icons
  • photos
  • custom
  • upcoming
  • sessions
  • Session: Will display the event sessions in a slider
  • Amenities: Will display the amenities in a slider
  • Sponsors:Will display the event sponsors in a slider
  • Exhibitors: Will display the event exhibitors in a slider
  • Speakers: Will display the even speakers in a slider.
  • Feed: Will display the event feed in a slider
  • Icons: Will display an icons slider The number of icons and icon display type is controlled in the configs section
  • Photos: Will display a slider of the even photos
  • Custom: Custom allows you to add custom images / sliders
  • Upcoming sessions: Will display the upcoming sessions and will not display items that have passed.
  • Auto playYes/NoThe auto play setting will determine if the slider should play automatically or only be moved on swipe.
    Pause betweenIntegerThe pause between is how long in millaseconds a slide should pause before moving to the next. This is only valid when auto play is set to yes
    SpeedIntegerThe speed is the speed of the transition to the next slide in millaseconds
    Space betweenIntegerThe space between allows you set in pixels the space between each slide. Must be more then 1 slider per view
    Type
  • Default
  • Hero
  • Gallery
  • The type section will determine how the slide will display. Only Custom sections can use the Hero section, all other will use default
    Effect
  • Slide
  • Cube
  • Flip
  • Fixed
  • The effect will control how the transition will look
  • Slide: Default slider to next
  • Cube: Transition will be a cube effect
  • Flip: Transition will be a flip effect
  • Fixed: No transition, a fixed image
  • Slide per viewIntegerThe number of sliders to show in a view. Note: It is best to not show more then 3 or 4 items per-slide as it can cause undesirable display issues
    Margin top MIntegerThe margin top M is the top margin in pixels for mobile
    Margin top WIntegerThe margin top W is the top margin in pixels for web
    Margin bottom MIntegerThe margin bottom M is the top margin in pixels for mobile
    Margin bottom WIntegerThe margin bottom W is the top margin in pixels for web
    Margin left MIntegerThe margin left M is the left margin in pixels for mobile
    Margin left WintegerThe margin left W is the left margin in pixels for web
    Margin right MIntegerThe margin right M is the right margin in pixels for mobile
    Margin right WIntegerThe margin right W is the right margin in pixels for web
    Card type
  • Default
  • Default Dark
  • No box light
  • No box dark
  • Image only
  • Default: The default look with a white background and border
  • Default Dark: The default layout with a dark color background for darker images
  • No box light: No background color with a light look and feel
  • No box dark: No background with a dark look and feel
  • Image only: When set on speakers, exhibitors, sponsor, attendees, it will only show their image in the slider
  • Custom slide settings

    When setting the type to custom, a new section will appear, allowing you to set custom slide. Because custom slides have no direct mapping, you must define each element in the slide, including the image and where it will link to.

    SettingValuesDefinition
    HeightString in pixelsThe height in pixels of the slide eg 150px
    Height WString Height WThe height in pixels of the slide in web view eg 150px
    Position
  • Center
  • Right
  • Left
  • The position of the slide and any elements.
    Size
  • Contain
  • Cover
  • Auto
  • How the background image will be treated. Contain will scale the image to contain it in the allow space, while cover will scale the image.
    Repeat
  • None
  • Repeat-x
  • Repeat-y
  • Determines if the background image should repeat of not
    Background imageURLThe main slide background image.
    LogoURLThe logo will overlay the background image
    LinkURLA link or section for where this slide should go to when clicked or tapped
    • Main settings
    • Section settings
    • Custom slide settings